import './public-path';
import { createApp } from 'vue';
import routes from './router/index';
import { createRouter, createWebHistory } from 'vue-router'
import type { Router, RouterHistory } from 'vue-router';
import App from './App.vue';
import {
  renderWithQiankun,
  qiankunWindow,
  QiankunProps,
} from 'vite-plugin-qiankun/dist/helper';
let instance: any = null;//这些不在window下吗？？？
let router: Router|null = null;
let history:  RouterHistory|null = null;
console.log(window);
const render = (props: QiankunProps = {}) => {
  const { container } = props
  history = createWebHistory()
  router = createRouter({
    //内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history,
    routes,
  })

  //链式运算符识别不了时使用，后面再看看为啥
  // let app:any = null;
  // if(!!container){
  //    app = container.querySelector('#subApp');
  // }else{
  //    app = '#subApp';
  // }
  console.log(container, 999);
  const app = container && container.querySelector('#subApp2') || '#subApp2'; // 避免 id 重复导致微应用挂载失败
  
  instance = createApp(App)
  instance.use(router)
  instance.mount(app)
  console.log(instance, 23)

  //这种写法获取的不一定是vue实例注意
  // instance = createApp(App).use(router).mount(app)
}
//需要暴露接入协议
const initQianKun = () => {
  renderWithQiankun({
    bootstrap() {
      // console.log('微应用：bootstrap')
    },
    mount(props) { // 获取主应用传入数据
      // console.log('微应用：mount', props)
      render(props)
      //提供一个值，可以被后代组件注入
      instance.provide('pager', props.pager)


      // props.pager.subscribe((v:any)=>{
      //   console.log(v,8888);
      // })
      // props.pager.next({a:'pppp'})
    },
    unmount(props) {
      // console.log('微应用：unmount', props)
      history = null;
      router = null;
      instance = null;
    },
    update(props) {
      // console.log('微应用：update', props)
    },
  })
} 

console.log(1, qiankunWindow.__POWERED_BY_QIANKUN__);


qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render() // 判断是否使用 qiankun ，保证项目可以独立运行

/**
 * 问题：
 * 挂载卸载，每次都会产生全新的实例，那就要加载全新的路由（防止内存泄漏）
 * 
 * 
 * 
 * 主子应用样式隔离（当前项目shadow和cssmodule都没有生效，估计是vite支持不好）  
 * ShadowDOM（影子dom） 
 * sandbox:{strictStyleIsolation: true}}
 * 成功开启，对应子应用的样式会放在#shadow-root->qiankun-head标签下，这样再想增加全局样式会有问题，且兼容性不好
 * 使用者：video标签，微服务
 * 
 * cssmodule（动态生成一个前缀） 
 * sandbox:{experimentalStyleIsolation: true}}  
 * 成功开启，style样式是全局的，都加上了前缀区分
 * css-loader也可以实现,将样式中的类名进行转换，转换为一个唯一的hash值
 * 
 * scoped后vue-loader会给对应的dom,css,加上hasy,生成规则主要是组件的路径（同一个组件内都是相同的hasy值）
 * 
 * 
 * js隔离(proxy)
 * 单例是快照沙箱，只有一个window,子应用加载前保存window的状态，当卸载后还原
 * 多例是代理沙箱，用proxy代理window,给每个子应用
 * 沙箱的实现https://zhuanlan.zhihu.com/p/450103808
 * 
 * 
 * 一些变量如何给定义类型，不想用any
 * 主应用和子应用之间是通过rxjs的发布订阅模式，子应用里面的组件间使用vuex吗，还是on,emit（vuex的区别）
 * 打包
 * 配置一个命令启动所有应用
 * 把子里面重复的依赖去除
 * 子应用之间如何通讯，可以直接连通吗
 * 了解项目配置
 * i18n(国际化)
 * 部署
 * 
 * 主 定义一个vuex的module，注册
 * 子 注册这个module
 * 这个是建立在用同一个vuex的基础上
 * 
 * routur 多子应用跳转问题（当前项目没有这个问题）
 * 用子应用里的router跳转到另一个子应用会不成功
 * 
 * 应用切换 换title
 * 
 * window 下挂载主子应用都有的依赖
 * vue2的时候这种方式会让vue原型受到污染，像一些全局的组件挂载到原型上，后面使用的子应用卸载了，它还在
 * 
 * entry 可指定到同一个路径处理，不光是可以挂子应用的域名和端口
 *  
 * 
 * 
 */